<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>稀土掘金</title>
    <link rel="stylesheet" href="./Css/reset.css">
    <link rel="stylesheet" href="./Css/home.css">
    <link rel="stylesheet" href="./incofont/iconfont.css">
</head>

<body>
    <!-- 顶部 -->
    <div class="headertop">
        <div class="box-show">
            <div class="contentheader row">

                <div class="imgheader">
                    <img src="./image/toplog.svg" alt="">
                </div>

                <div class="header-nav row">

                    <ul class="nav-ul row">
                        <li><a href="javascript;" class="active">首页</a></li>
                        <li><a href="javascript;">BOT</a></li>
                        <li><a href="javascript;">沸点</a></li>
                        <li><a href="javascript;">课程</a></li>
                        <li><a href="javascript;">直播</a></li>
                        <li><a href="javascript;">活动</a></li>
                        <li><a href="javascript;">竞赛</a></li>
                        <li><a href="javascript;">商城</a></li>
                        <li class="nones"><a href="javascript;">App</a></li>
                        <li class="nones"><a href="javascript;">插件</a></li>
                        <li><a href="javascript;"><img src="./image/ullia.png" alt="" width="115px"></a></li>
                    </ul>

                    <!-- 隐藏的盒子 -->
                    <div class="bisnone-box row">
                        <span class="shouye-none">首页<svg width="12" height="12" viewBox="0 0 12 12" fill="none"
                                xmlns="http://www.w3.org/2000/svg" class="unfold12-icon" data-v-17cc1c49="">
                                <path
                                    d="M2.45025 4.82383C2.17422 4.49908 2.40501 4 2.83122 4H9.16878C9.59499 4 9.82578 4.49908 9.54975 4.82382L6.38097 8.5518C6.1813 8.7867 5.8187 8.7867 5.61903 8.5518L2.45025 4.82383Z"
                                    fill="black" data-v-17cc1c49=""></path>
                            </svg>
                        </span>
                    </div>

                    <!-- 隐藏的盒子 -->
                    <div class="boxss-none">
                        <ul class="nav-ul-tow column">
                            <li><a href="javascript;" class="active">首页</a></li>
                            <li><a href="javascript;">BOT</a></li>
                            <li><a href="javascript;">沸点</a></li>
                            <li><a href="javascript;">课程</a></li>
                            <li><a href="javascript;">直播</a></li>
                            <li><a href="javascript;">活动</a></li>
                            <li><a href="javascript;">竞赛</a></li>
                            <li><a href="javascript;">商城</a></li>
                            <li><a href="javascript;"><img src="./image/ullia.png" alt="" width="115px"></a></li>
                        </ul>
                    </div>

                    <div class="right-nav row">

                        <div class="inputs-top row">
                            <div class="nav-input row">
                                <input class="ipt" type="text" placeholder="请输入内容">
                                <div class="btn-sou iconfont icon-sousuo"></div>
                            </div>

                            <div class="btn-text row">
                                <div class="anniu">创作者中心</div>
                                <div class="more">
                                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
                                        xmlns="http://www.w3.org/2000/svg" class="unfold12-icon" data-v-17cc1c49="">
                                        <path
                                            d="M2.45025 4.82383C2.17422 4.49908 2.40501 4 2.83122 4H9.16878C9.59499 4 9.82578 4.49908 9.54975 4.82382L6.38097 8.5518C6.1813 8.7867 5.8187 8.7867 5.61903 8.5518L2.45025 4.82383Z"
                                            fill="white" data-v-17cc1c49=""></path>
                                    </svg>
                                </div>
                            </div>
                        </div>

                        <div class="topright-info">
                            <div class="tile-biao row">
                                <div class="biao-left"><img src="./image/tou'xiang01.png" alt=""></div>
                                <div class="biao-right">会员</div>
                            </div>

                            <div class="info">
                                <button class="denglu cle">登录</button>
                                <span class="fenge">|</span>
                                <button class="zhuce cle">注册</button>
                            </div>
                        </div>


                    </div>

                </div>
            </div>
        </div>


        <div class="ner-lefttop">
            <ul class="row">
                <li><a href="javascript;" class="active">首页</a></li>
                <li><a href="javascript;">BOT</a></li>
                <li><a href="javascript;">沸点</a></li>
                <li><a href="javascript;">课程</a></li>
                <li><a href="javascript;">直播</a></li>
                <li><a href="javascript;">活动</a></li>
                <li><a href="javascript;">竞赛</a></li>
                <li><a href="javascript;">商城</a></li>
                <li><a href="javascript;">App</a></li>
                <li><a href="javascript;">插件</a></li>
            </ul>
        </div>
    </div>
    <!-- 内容区 -->
    <div class="nierong row">
        <div class="counmentne row">
            <div class="nierong-left bans">
                <div class="header-left">
                    <ul>
                        <li class="text-top row">
                            <div class="left-ia">
                                <i class="tubiao1 iconfont icon-putongziyuan"></i>
                                <a href="#">
                                    大模型子站
                                </a>
                            </div>
                            <span class="jiantou iconfont icon-youjiantou"></span>
                        </li>
                        <li class="listno activebj"><i class="tubiao1 iconfont icon-qianduan"></i>关注</li>
                        <li class="listno"><i class="tubiao1 iconfont icon-qianduan"></i>综合</li>
                        <li class="listno"><i class="tubiao1 iconfont icon-qianduan"></i>后端</li>
                        <li class="listno"><i class="tubiao1 iconfont icon-qianduan"></i>前端</li>
                        <li class="listno"><i class="tubiao1 iconfont icon-qianduan"></i>Android</li>
                        <li class="listno"><i class="tubiao1 iconfont icon-qianduan"></i>ios</li>
                        <li class="listno"><i class="tubiao1 iconfont icon-qianduan"></i>人工智能</li>
                        <li class="listno"><i class="tubiao1 iconfont icon-qianduan"></i>开发工具</li>
                        <li class="listno"><i class="tubiao1 iconfont icon-qianduan"></i>代码人生</li>
                        <li class="listno"><i class="tubiao1 iconfont icon-qianduan"></i>阅读</li>
                        <li class="listno"><i class="tubiao1 iconfont icon-qianduan"></i>排行榜</li>
                    </ul>
                </div>

            </div>

            <div class="nierong-content bans">

                <div class="nr column">

                    <div class="netrong-biaoti">
                        <ul class="netrong-ul row">
                            <li class="active-bt"><a href="#">推荐</a></li>
                            <li><a href="#">最新</a></li>
                        </ul>
                    </div>

                    <div class="nierong-zhuti column">

                        <div class="zhuti">

                            <div class="bottom-bor">
                                <div class="tile-text">
                                    <a class="tile-a" href="#">写了一个字典hook，瞬间让组员开发效率提高20%！！！</a>
                                </div>

                                <div class="tile-p">
                                    <p>1、引言
                                        在项目的开发中，发现有很多地方（如：选择器、数据回显等）都需要用到字典数据，而且一个页面通常需要请求多个字典接口，如果每次打开同一个页面都需要重新去请求相同的数据，不但浪费网络资源、也给开发
                                    </p>
                                </div>

                                <div class="footer-text row">

                                    <div class="folt-left">
                                        <ul class="row">
                                            <li><a href="#">Aplee</a>
                                                <div class="xian"></div>
                                            </li>
                                            <li><a href="#" class="noneho">
                                                    <i class="yan iconfont icon-yanjing"></i>48K</a></li>
                                            <li><a href="#">
                                                    <i class="shou iconfont icon-dianzan"></i>
                                                    277</a>
                                            </li>
                                            <li><a href="#">
                                                    <i class="sand iconfont icon-sandian"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>

                                    <div class="folt-right">
                                        <ul class="row">
                                            <li><a href="#">javascript</a></li>
                                            <li><a href="#">前端</a></li>
                                            <li><a href="#">面试</a></li>
                                        </ul>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="zhuti">
                            <div class="bottom-bor">
                                <div class="tile-text">
                                    <a class="tile-a" href="#">写了一个字典hook，瞬间让组员开发效率提高20%！！！</a>
                                </div>

                                <div class="tile-p">
                                    <p>1、引言
                                        在项目的开发中，发现有很多地方（如：选择器、数据回显等）都需要用到字典数据，而且一个页面通常需要请求多个字典接口，如果每次打开同一个页面都需要重新去请求相同的数据，不但浪费网络资源、也给开发
                                    </p>
                                </div>

                                <div class="footer-text row">

                                    <div class="folt-left">
                                        <ul class="row">
                                            <li><a href="#">Aplee</a>
                                                <div class="xian"></div>
                                            </li>
                                            <li><a href="#" class="noneho">
                                                    <i class="yan iconfont icon-yanjing"></i>48K</a></li>
                                            <li><a href="#">
                                                    <i class="shou iconfont icon-dianzan"></i>
                                                    277</a>
                                            </li>
                                            <li><a href="#">
                                                    <i class="sand iconfont icon-sandian"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>

                                    <div class="folt-right">
                                        <ul class="row">
                                            <li><a href="#">javascript</a></li>
                                            <li><a href="#">前端</a></li>
                                            <li><a href="#">面试</a></li>
                                        </ul>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="zhuti">

                            <div class="bottom-bor row">

                                <div class="zhuti-out">

                                    <div class="tile-text">
                                        <a class="tile-a" href="#">写了一个字典hook，瞬间让组员开发效率提高20%！！！</a>
                                    </div>

                                    <div class="tile-p">
                                        <p>1、引言
                                            在项目的开发中，发现有很多地方（如：选择器、数据回显等）都需要用到字典数据，而且一个页面通常需要请求多个字典接口，如果每次打开同一个页面都需要重新去请求相同的数据，不但浪费网络资源、也给开发
                                        </p>
                                    </div>

                                    <div class="footer-text row">

                                        <div class="folt-left">
                                            <ul class="row">
                                                <li><a href="#">Aplee</a>
                                                    <div class="xian"></div>
                                                </li>
                                                <li><a href="#" class="noneho">
                                                        <i class="yan iconfont icon-yanjing"></i>48K</a></li>
                                                <li><a href="#">
                                                        <i class="shou iconfont icon-dianzan"></i>
                                                        277</a>
                                                </li>
                                                <li><a href="#">
                                                        <i class="sand iconfont icon-sandian"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="folt-right">
                                            <ul class="row">
                                                <li><a href="#">javascript</a></li>
                                                <li><a href="#">前端</a></li>
                                                <li><a href="#">面试</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="box-right-img">
                                    <img src="./image/01.avis" alt="">
                                </div>

                            </div>
                        </div>
                        <div class="zhuti">

                            <div class="bottom-bor row">

                                <div class="zhuti-out">

                                    <div class="tile-text">
                                        <a class="tile-a" href="#">写了一个字典hook，瞬间让组员开发效率提高20%！！！</a>
                                    </div>

                                    <div class="tile-p">
                                        <p>1、引言
                                            在项目的开发中，发现有很多地方（如：选择器、数据回显等）都需要用到字典数据，而且一个页面通常需要请求多个字典接口，如果每次打开同一个页面都需要重新去请求相同的数据，不但浪费网络资源、也给开发
                                        </p>
                                    </div>

                                    <div class="footer-text row">

                                        <div class="folt-left">
                                            <ul class="row">
                                                <li><a href="#">Aplee</a>
                                                    <div class="xian"></div>
                                                </li>
                                                <li><a href="#" class="noneho">
                                                        <i class="yan iconfont icon-yanjing"></i>48K</a></li>
                                                <li><a href="#">
                                                        <i class="shou iconfont icon-dianzan"></i>
                                                        277</a>
                                                </li>
                                                <li><a href="#">
                                                        <i class="sand iconfont icon-sandian"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="folt-right">
                                            <ul class="row">
                                                <li><a href="#">javascript</a></li>
                                                <li><a href="#">前端</a></li>
                                                <li><a href="#">面试</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="box-right-img">
                                    <img src="./image/01.avis" alt="">
                                </div>

                            </div>
                        </div>
                        <div class="zhuti">

                            <div class="bottom-bor row">

                                <div class="zhuti-out">

                                    <div class="tile-text">
                                        <a class="tile-a" href="#">写了一个字典hook，瞬间让组员开发效率提高20%！！！</a>
                                    </div>

                                    <div class="tile-p">
                                        <p>1、引言
                                            在项目的开发中，发现有很多地方（如：选择器、数据回显等）都需要用到字典数据，而且一个页面通常需要请求多个字典接口，如果每次打开同一个页面都需要重新去请求相同的数据，不但浪费网络资源、也给开发
                                        </p>
                                    </div>

                                    <div class="footer-text row">

                                        <div class="folt-left">
                                            <ul class="row">
                                                <li><a href="#">Aplee</a>
                                                    <div class="xian"></div>
                                                </li>
                                                <li><a href="#" class="noneho">
                                                        <i class="yan iconfont icon-yanjing"></i>48K</a></li>
                                                <li><a href="#">
                                                        <i class="shou iconfont icon-dianzan"></i>
                                                        277</a>
                                                </li>
                                                <li><a href="#">
                                                        <i class="sand iconfont icon-sandian"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="folt-right">
                                            <ul class="row">
                                                <li><a href="#">javascript</a></li>
                                                <li><a href="#">前端</a></li>
                                                <li><a href="#">面试</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="box-right-img">
                                    <img src="./image/01.avis" alt="">
                                </div>

                            </div>
                        </div>
                        <div class="zhuti">

                            <div class="bottom-bor row">

                                <div class="zhuti-out">

                                    <div class="tile-text">
                                        <a class="tile-a" href="#">写了一个字典hook，瞬间让组员开发效率提高20%！！！</a>
                                    </div>

                                    <div class="tile-p">
                                        <p>1、引言
                                            在项目的开发中，发现有很多地方（如：选择器、数据回显等）都需要用到字典数据，而且一个页面通常需要请求多个字典接口，如果每次打开同一个页面都需要重新去请求相同的数据，不但浪费网络资源、也给开发
                                        </p>
                                    </div>

                                    <div class="footer-text row">

                                        <div class="folt-left">
                                            <ul class="row">
                                                <li><a href="#">Aplee</a>
                                                    <div class="xian"></div>
                                                </li>
                                                <li><a href="#" class="noneho">
                                                        <i class="yan iconfont icon-yanjing"></i>48K</a></li>
                                                <li><a href="#">
                                                        <i class="shou iconfont icon-dianzan"></i>
                                                        277</a>
                                                </li>
                                                <li><a href="#">
                                                        <i class="sand iconfont icon-sandian"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="folt-right">
                                            <ul class="row">
                                                <li><a href="#">javascript</a></li>
                                                <li><a href="#">前端</a></li>
                                                <li><a href="#">面试</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="box-right-img">
                                    <img src="./image/01.avis" alt="">
                                </div>

                            </div>
                        </div>
                        <div class="zhuti">

                            <div class="bottom-bor row">

                                <div class="zhuti-out">

                                    <div class="tile-text">
                                        <a class="tile-a" href="#">写了一个字典hook，瞬间让组员开发效率提高20%！！！</a>
                                    </div>

                                    <div class="tile-p">
                                        <p>1、引言
                                            在项目的开发中，发现有很多地方（如：选择器、数据回显等）都需要用到字典数据，而且一个页面通常需要请求多个字典接口，如果每次打开同一个页面都需要重新去请求相同的数据，不但浪费网络资源、也给开发
                                        </p>
                                    </div>

                                    <div class="footer-text row">

                                        <div class="folt-left">
                                            <ul class="row">
                                                <li><a href="#">Aplee</a>
                                                    <div class="xian"></div>
                                                </li>
                                                <li><a href="#" class="noneho">
                                                        <i class="yan iconfont icon-yanjing"></i>48K</a></li>
                                                <li><a href="#">
                                                        <i class="shou iconfont icon-dianzan"></i>
                                                        277</a>
                                                </li>
                                                <li><a href="#">
                                                        <i class="sand iconfont icon-sandian"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="folt-right">
                                            <ul class="row">
                                                <li><a href="#">javascript</a></li>
                                                <li><a href="#">前端</a></li>
                                                <li><a href="#">面试</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="box-right-img">
                                    <img src="./image/01.avis" alt="">
                                </div>

                            </div>
                        </div>
                        <div class="zhuti">

                            <div class="bottom-bor row">

                                <div class="zhuti-out">

                                    <div class="tile-text">
                                        <a class="tile-a" href="#">写了一个字典hook，瞬间让组员开发效率提高20%！！！</a>
                                    </div>

                                    <div class="tile-p">
                                        <p>1、引言
                                            在项目的开发中，发现有很多地方（如：选择器、数据回显等）都需要用到字典数据，而且一个页面通常需要请求多个字典接口，如果每次打开同一个页面都需要重新去请求相同的数据，不但浪费网络资源、也给开发
                                        </p>
                                    </div>

                                    <div class="footer-text row">

                                        <div class="folt-left">
                                            <ul class="row">
                                                <li><a href="#">Aplee</a>
                                                    <div class="xian"></div>
                                                </li>
                                                <li><a href="#" class="noneho">
                                                        <i class="yan iconfont icon-yanjing"></i>48K</a></li>
                                                <li><a href="#">
                                                        <i class="shou iconfont icon-dianzan"></i>
                                                        277</a>
                                                </li>
                                                <li><a href="#">
                                                        <i class="sand iconfont icon-sandian"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="folt-right">
                                            <ul class="row">
                                                <li><a href="#">javascript</a></li>
                                                <li><a href="#">前端</a></li>
                                                <li><a href="#">面试</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="box-right-img">
                                    <img src="./image/01.avis" alt="">
                                </div>

                            </div>
                        </div>
                        <div class="zhuti">

                            <div class="bottom-bor row">

                                <div class="zhuti-out">

                                    <div class="tile-text">
                                        <a class="tile-a" href="#">写了一个字典hook，瞬间让组员开发效率提高20%！！！</a>
                                    </div>

                                    <div class="tile-p">
                                        <p>1、引言
                                            在项目的开发中，发现有很多地方（如：选择器、数据回显等）都需要用到字典数据，而且一个页面通常需要请求多个字典接口，如果每次打开同一个页面都需要重新去请求相同的数据，不但浪费网络资源、也给开发
                                        </p>
                                    </div>

                                    <div class="footer-text row">

                                        <div class="folt-left">
                                            <ul class="row">
                                                <li><a href="#">Aplee</a>
                                                    <div class="xian"></div>
                                                </li>
                                                <li><a href="#" class="noneho">
                                                        <i class="yan iconfont icon-yanjing"></i>48K</a></li>
                                                <li><a href="#">
                                                        <i class="shou iconfont icon-dianzan"></i>
                                                        277</a>
                                                </li>
                                                <li><a href="#">
                                                        <i class="sand iconfont icon-sandian"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="folt-right">
                                            <ul class="row">
                                                <li><a href="#">javascript</a></li>
                                                <li><a href="#">前端</a></li>
                                                <li><a href="#">面试</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="box-right-img">
                                    <img src="./image/01.avis" alt="">
                                </div>

                            </div>
                        </div>
                        <div class="zhuti">

                            <div class="bottom-bor row">

                                <div class="zhuti-out">

                                    <div class="tile-text">
                                        <a class="tile-a" href="#">写了一个字典hook，瞬间让组员开发效率提高20%！！！</a>
                                    </div>

                                    <div class="tile-p">
                                        <p>1、引言
                                            在项目的开发中，发现有很多地方（如：选择器、数据回显等）都需要用到字典数据，而且一个页面通常需要请求多个字典接口，如果每次打开同一个页面都需要重新去请求相同的数据，不但浪费网络资源、也给开发
                                        </p>
                                    </div>

                                    <div class="footer-text row">

                                        <div class="folt-left">
                                            <ul class="row">
                                                <li><a href="#">Aplee</a>
                                                    <div class="xian"></div>
                                                </li>
                                                <li><a href="#" class="noneho">
                                                        <i class="yan iconfont icon-yanjing"></i>48K</a></li>
                                                <li><a href="#">
                                                        <i class="shou iconfont icon-dianzan"></i>
                                                        277</a>
                                                </li>
                                                <li><a href="#">
                                                        <i class="sand iconfont icon-sandian"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="folt-right">
                                            <ul class="row">
                                                <li><a href="#">javascript</a></li>
                                                <li><a href="#">前端</a></li>
                                                <li><a href="#">面试</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="box-right-img">
                                    <img src="./image/01.avis" alt="">
                                </div>

                            </div>
                        </div>
                        <div class="zhuti">

                            <div class="bottom-bor row">

                                <div class="zhuti-out">

                                    <div class="tile-text">
                                        <a class="tile-a" href="#">写了一个字典hook，瞬间让组员开发效率提高20%！！！</a>
                                    </div>

                                    <div class="tile-p">
                                        <p>1、引言
                                            在项目的开发中，发现有很多地方（如：选择器、数据回显等）都需要用到字典数据，而且一个页面通常需要请求多个字典接口，如果每次打开同一个页面都需要重新去请求相同的数据，不但浪费网络资源、也给开发
                                        </p>
                                    </div>

                                    <div class="footer-text row">

                                        <div class="folt-left">
                                            <ul class="row">
                                                <li><a href="#">Aplee</a>
                                                    <div class="xian"></div>
                                                </li>
                                                <li><a href="#" class="noneho">
                                                        <i class="yan iconfont icon-yanjing"></i>48K</a></li>
                                                <li><a href="#">
                                                        <i class="shou iconfont icon-dianzan"></i>
                                                        277</a>
                                                </li>
                                                <li><a href="#">
                                                        <i class="sand iconfont icon-sandian"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="folt-right">
                                            <ul class="row">
                                                <li><a href="#">javascript</a></li>
                                                <li><a href="#">前端</a></li>
                                                <li><a href="#">面试</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="box-right-img">
                                    <img src="./image/01.avis" alt="">
                                </div>

                            </div>
                        </div>
                        <div class="zhuti">

                            <div class="bottom-bor row">

                                <div class="zhuti-out">

                                    <div class="tile-text">
                                        <a class="tile-a" href="#">写了一个字典hook，瞬间让组员开发效率提高20%！！！</a>
                                    </div>

                                    <div class="tile-p">
                                        <p>1、引言
                                            在项目的开发中，发现有很多地方（如：选择器、数据回显等）都需要用到字典数据，而且一个页面通常需要请求多个字典接口，如果每次打开同一个页面都需要重新去请求相同的数据，不但浪费网络资源、也给开发
                                        </p>
                                    </div>

                                    <div class="footer-text row">

                                        <div class="folt-left">
                                            <ul class="row">
                                                <li><a href="#">Aplee</a>
                                                    <div class="xian"></div>
                                                </li>
                                                <li><a href="#" class="noneho">
                                                        <i class="yan iconfont icon-yanjing"></i>48K</a></li>
                                                <li><a href="#">
                                                        <i class="shou iconfont icon-dianzan"></i>
                                                        277</a>
                                                </li>
                                                <li><a href="#">
                                                        <i class="sand iconfont icon-sandian"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="folt-right">
                                            <ul class="row">
                                                <li><a href="#">javascript</a></li>
                                                <li><a href="#">前端</a></li>
                                                <li><a href="#">面试</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="box-right-img">
                                    <img src="./image/01.avis" alt="">
                                </div>

                            </div>
                        </div>
                        <div class="zhuti">

                            <div class="bottom-bor row">

                                <div class="zhuti-out">

                                    <div class="tile-text">
                                        <a class="tile-a" href="#">写了一个字典hook，瞬间让组员开发效率提高20%！！！</a>
                                    </div>

                                    <div class="tile-p">
                                        <p>1、引言
                                            在项目的开发中，发现有很多地方（如：选择器、数据回显等）都需要用到字典数据，而且一个页面通常需要请求多个字典接口，如果每次打开同一个页面都需要重新去请求相同的数据，不但浪费网络资源、也给开发
                                        </p>
                                    </div>

                                    <div class="footer-text row">

                                        <div class="folt-left">
                                            <ul class="row">
                                                <li><a href="#">Aplee</a>
                                                    <div class="xian"></div>
                                                </li>
                                                <li><a href="#" class="noneho">
                                                        <i class="yan iconfont icon-yanjing"></i>48K</a></li>
                                                <li><a href="#">
                                                        <i class="shou iconfont icon-dianzan"></i>
                                                        277</a>
                                                </li>
                                                <li><a href="#">
                                                        <i class="sand iconfont icon-sandian"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="folt-right">
                                            <ul class="row">
                                                <li><a href="#">javascript</a></li>
                                                <li><a href="#">前端</a></li>
                                                <li><a href="#">面试</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="box-right-img">
                                    <img src="./image/01.avis" alt="">
                                </div>

                            </div>
                        </div>
                        <div class="zhuti">

                            <div class="bottom-bor row">

                                <div class="zhuti-out">

                                    <div class="tile-text">
                                        <a class="tile-a" href="#">写了一个字典hook，瞬间让组员开发效率提高20%！！！</a>
                                    </div>

                                    <div class="tile-p">
                                        <p>1、引言
                                            在项目的开发中，发现有很多地方（如：选择器、数据回显等）都需要用到字典数据，而且一个页面通常需要请求多个字典接口，如果每次打开同一个页面都需要重新去请求相同的数据，不但浪费网络资源、也给开发
                                        </p>
                                    </div>

                                    <div class="footer-text row">

                                        <div class="folt-left">
                                            <ul class="row">
                                                <li><a href="#">Aplee</a>
                                                    <div class="xian"></div>
                                                </li>
                                                <li><a href="#" class="noneho">
                                                        <i class="yan iconfont icon-yanjing"></i>48K</a></li>
                                                <li><a href="#">
                                                        <i class="shou iconfont icon-dianzan"></i>
                                                        277</a>
                                                </li>
                                                <li><a href="#">
                                                        <i class="sand iconfont icon-sandian"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="folt-right">
                                            <ul class="row">
                                                <li><a href="#">javascript</a></li>
                                                <li><a href="#">前端</a></li>
                                                <li><a href="#">面试</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="box-right-img">
                                    <img src="./image/01.avis" alt="">
                                </div>

                            </div>
                        </div>
                        <div class="zhuti">

                            <div class="bottom-bor row">

                                <div class="zhuti-out">

                                    <div class="tile-text">
                                        <a class="tile-a" href="#">写了一个字典hook，瞬间让组员开发效率提高20%！！！</a>
                                    </div>

                                    <div class="tile-p">
                                        <p>1、引言
                                            在项目的开发中，发现有很多地方（如：选择器、数据回显等）都需要用到字典数据，而且一个页面通常需要请求多个字典接口，如果每次打开同一个页面都需要重新去请求相同的数据，不但浪费网络资源、也给开发
                                        </p>
                                    </div>

                                    <div class="footer-text row">

                                        <div class="folt-left">
                                            <ul class="row">
                                                <li><a href="#">Aplee</a>
                                                    <div class="xian"></div>
                                                </li>
                                                <li><a href="#" class="noneho">
                                                        <i class="yan iconfont icon-yanjing"></i>48K</a></li>
                                                <li><a href="#">
                                                        <i class="shou iconfont icon-dianzan"></i>
                                                        277</a>
                                                </li>
                                                <li><a href="#">
                                                        <i class="sand iconfont icon-sandian"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="folt-right">
                                            <ul class="row">
                                                <li><a href="#">javascript</a></li>
                                                <li><a href="#">前端</a></li>
                                                <li><a href="#">面试</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="box-right-img">
                                    <img src="./image/01.avis" alt="">
                                </div>

                            </div>
                        </div>
                        <div class="zhuti">

                            <div class="bottom-bor row">

                                <div class="zhuti-out">

                                    <div class="tile-text">
                                        <a class="tile-a" href="#">写了一个字典hook，瞬间让组员开发效率提高20%！！！</a>
                                    </div>

                                    <div class="tile-p">
                                        <p>1、引言
                                            在项目的开发中，发现有很多地方（如：选择器、数据回显等）都需要用到字典数据，而且一个页面通常需要请求多个字典接口，如果每次打开同一个页面都需要重新去请求相同的数据，不但浪费网络资源、也给开发
                                        </p>
                                    </div>

                                    <div class="footer-text row">

                                        <div class="folt-left">
                                            <ul class="row">
                                                <li><a href="#">Aplee</a>
                                                    <div class="xian"></div>
                                                </li>
                                                <li><a href="#" class="noneho">
                                                        <i class="yan iconfont icon-yanjing"></i>48K</a></li>
                                                <li><a href="#">
                                                        <i class="shou iconfont icon-dianzan"></i>
                                                        277</a>
                                                </li>
                                                <li><a href="#">
                                                        <i class="sand iconfont icon-sandian"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="folt-right">
                                            <ul class="row">
                                                <li><a href="#">javascript</a></li>
                                                <li><a href="#">前端</a></li>
                                                <li><a href="#">面试</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <div class="box-right-img">
                                    <img src="./image/01.avis" alt="">
                                </div>

                            </div>
                        </div>
                    </div>
                </div>


                <div class="nierong-right bans">

                    <div class="top-qiandao row">
                        <div class="line-tile column">
                            <span class="qian">早上好</span>
                            <div class="qian-tishi">
                                <p class="jieshou">点亮社区的每一天</p>
                            </div>
                        </div>

                        <div class="btn-qiandao row">
                            <a href="#" class="btn-qd">去签到</a>
                        </div>
                    </div>

                    <div class="right-box2 column">
                        <div class="box2-top row">
                            <div class="box2-top-left">
                                <img src="./image/right2-top.png" alt="">
                                <span>文章榜</span>
                            </div>

                            <div class="box2-top-tight">
                                <i class="icon iconfont icon-shuaxin"></i>
                                <span>换一换</span>
                            </div>
                        </div>
                        <div class="box3-ullist">
                            <ul>
                                <li class="row"><span class="pan1">1</span><a href="#">最近很颓废，魔改了一个开源项目，打造自己的企业级Admin</a>
                                </li>
                                <li class="row"><span class="pan2">2</span><a href="#">最近很颓废，魔改了一个开源项目，打造自己的企业级Admin</a>
                                </li>
                                <li class="row"><span class="pan3">3</span><a href="#">最近很颓废，魔改了一个开源项目，打造自己的企业级Admin</a>
                                </li>
                                <li class="row"><span class="pan4">4</span><a href="#">最近很颓废，魔改了一个开源项目，打造自己的企业级Admin</a>
                                </li>
                                <li class="row"><span class="pan4">5</span><a href="#">最近很颓废，魔改了一个开源项目，打造自己的企业级Admin</a>
                                </li>
                            </ul>
                        </div>
                        <div class="box3-gendou row">
                            <span>查看更多<i class="icon-righr iconfont icon-youjiantou"></i></span>
                        </div>
                    </div>

                    <div class="box-guanggao">
                        <img src="./image/right01.avis" alt="">
                        <img src="./image/right01.avis" alt="">
                        <img src="./image/right01.avis" alt="">
                    </div>

                    <div class="right-box2 column">
                        <div class="box2-top row">
                            <div class="box2-top-left">
                                <img src="./image/right2-top.png" alt="">
                                <span>作者榜</span>
                            </div>

                            <div class="box2-top-tight">
                                <i class="icon"></i>
                                <span></span>
                            </div>
                        </div>
                        <div class="box4-ullist">
                            <ul>
                                <li class="list-li row">
                                    <img src="./image/tou'xiang01.png" alt="" width="24px" height="24px">
                                    <div class="box4-text row">
                                        <div class="left-textuser">
                                            <h3>知否技术</h3>
                                            <p>前端侦探 @阅文集团</p>
                                        </div>
                                        <div class="right-guanzhu">
                                            <span>+ 关注</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-li row">
                                    <img src="./image/tou'xiang01.png" alt="" width="24px" height="24px">
                                    <div class="box4-text row">
                                        <div class="left-textuser">
                                            <h3>知否技术</h3>
                                            <p>前端侦探 @阅文集团</p>
                                        </div>
                                        <div class="right-guanzhu">
                                            <span>+ 关注</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-li row">
                                    <img src="./image/tou'xiang01.png" alt="" width="24px" height="24px">
                                    <div class="box4-text row">
                                        <div class="left-textuser">
                                            <h3>知否技术</h3>
                                            <p>前端侦探 @阅文集团</p>
                                        </div>
                                        <div class="right-guanzhu">
                                            <span>+ 关注</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-li row">
                                    <img src="./image/tou'xiang01.png" alt="" width="24px" height="24px">
                                    <div class="box4-text row">
                                        <div class="left-textuser">
                                            <h3>知否技术</h3>
                                            <p>前端侦探 @阅文集团</p>
                                        </div>
                                        <div class="right-guanzhu">
                                            <span>+ 关注</span>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-li row">
                                    <img src="./image/tou'xiang01.png" alt="" width="24px" height="24px">
                                    <div class="box4-text row">
                                        <div class="left-textuser">
                                            <h3>知否技术</h3>
                                            <p>前端侦探 @阅文集团</p>
                                        </div>
                                        <div class="right-guanzhu">
                                            <span>+ 关注</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="box3-gendou row">
                            <span>查看更多<i class="icon-righr iconfont icon-youjiantou"></i></span>
                        </div>
                    </div>

                    <div class="right-box2 column">
                        <div class="box2-top row">
                            <div class="box2-top-left">
                                <span>推荐话题</span>
                            </div>

                            <div class="box2-top-tight">
                                <i class="icon iconfont icon-shuaxin"></i>
                                <span>换一换</span>
                            </div>
                        </div>
                        <div class="box5-ullist">
                            <ul>
                                <li class="liet row">
                                    <div class="box5-le">
                                        <img src="./image/rec.png" alt="" width="16px" height="16px">
                                        <span>#挑战每日一条沸点#</span>
                                    </div>
                                    <span>9.4m</span>
                                </li>
                                <li class="liet row">
                                    <div class="box5-le">
                                        <img src="./image/rec.png" alt="" width="16px" height="16px">
                                        <span>#挑战每日一条沸点#</span>
                                    </div>
                                    <span>9.4m</span>
                                </li>
                                <li class="liet row">
                                    <div class="box5-le">
                                        <img src="./image/rec.png" alt="" width="16px" height="16px">
                                        <span>#挑战每日一条沸点#</span>
                                    </div>
                                    <span>9.4m</span>
                                </li>
                                <li class="liet row">
                                    <div class="box5-le">
                                        <img src="./image/rec.png" alt="" width="16px" height="16px">
                                        <span>#挑战每日一条沸点#</span>
                                    </div>
                                    <span>9.4m</span>
                                </li>
                                <li class="liet row">
                                    <div class="box5-le">
                                        <img src="./image/rec.png" alt="" width="16px" height="16px">
                                        <span>#挑战每日一条沸点#</span>
                                    </div>
                                    <span>9.4m</span>
                                </li>
                                <li class="liet row">
                                    <div class="box5-le">
                                        <img src="./image/rec.png" alt="" width="16px" height="16px">
                                        <span>#挑战每日一条沸点#</span>
                                    </div>
                                    <span>9.4m</span>
                                </li>
                                <li class="liet row">
                                    <div class="box5-le">
                                        <img src="./image/rec.png" alt="" width="16px" height="16px">
                                        <span>#挑战每日一条沸点#</span>
                                    </div>
                                    <span>9.4m</span>
                                </li>
                                <li class="liet row">
                                    <div class="box5-le">
                                        <img src="./image/rec.png" alt="" width="16px" height="16px">
                                        <span>#挑战每日一条沸点#</span>
                                    </div>
                                    <span>9.4m</span>
                                </li>
                            </ul>
                        </div>
                        <div class="box3-gendou row">
                            <span>查看更多<i class="icon-righr iconfont icon-youjiantou"></i></span>
                        </div>
                    </div>

                    <div class="right-box6 column">
                        <div class="dt-foorter">
                            <ul>
                                <li>
                                    <a href="#">用户政策</a>
                                    <a href="#">营业执照</a>
                                    <a href="#">隐私政策</a>
                                    <a href="#">关于我们</a>
                                </li>
                                <li>
                                    <a href="#">使用指南</a>
                                    <a href="#">友情链接</a>
                                    <a href="#">更多文章</a>
                                </li>
                                <li>
                                    <a href="#">举报邮箱:</a>
                                    <a href="#">feedback@xitu.io</a>
                                </li>
                                <li>
                                    <a href="#">座机电话:</a>
                                    <a href="#">010-83434395</a>
                                </li>
                                <li>
                                    <a href="#">京ICP备:</a>
                                    <a href="#">18012699号-3</a>
                                </li>
                                <li>
                                    <a href="#">京ICP证:</a>
                                    <a href="#">京B2-20191272</a>
                                </li>
                                <li>

                                    <img src="./image/police.png" alt="" width="20px" height="20px">
                                    <a href="#">京公网安备11010802026719号</a>
                                </li>
                                <li>
                                    <a href="#">©2024 稀土掘金</a>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <script>
        // inupt框焦点事件
        function huansc(sc) {
            navInput.style.borderColor = sc
        } 
         function widthInput(){
             window.innerWidth < 1350 && window.innerWidth > 1190 ? Input.style.width = '135px' : Input.style.width = '200px'
        }
        const navInput = document.querySelector('.nav-input')
        const Input = document.querySelector('.ipt')
        Input.addEventListener('focus', function () {
            huansc('#007fff')
            this.style.width = '350px'
        })
        Input.addEventListener('blur', function () {
            huansc('#ccc')
            widthInput()
        })
        window.addEventListener('resize', function () {
            widthInput()
        })


        // 获取页面高度
        const nierongContent = document.querySelector('.nierong-content')
        const nierongLeft = document.querySelector('.nierong-left')
        window.addEventListener('scroll', function () {
            let tops = nierongContent.scrollTop
            let set = Math.floor(nierongContent.getBoundingClientRect().y)
            if (set < -300) {
                document.querySelector('.headertop').classList.add('tran')
                nierongLeft.style.top = '20px';
            } else if (set > tops) {
                document.querySelector('.headertop').classList.remove('tran')
                nierongLeft.style.top = '80px';
            }
        })

        // 头部首页下拉框
        const boxssNone = document.querySelector('.boxss-none')
        document.querySelector('.shouye-none').addEventListener('click', function () {
            boxssNone.style.display = 'block'
        })
        window.addEventListener('click', function (e) {
            if (!(e.target.tagName === 'SPAN')) boxssNone.style.display = 'none' ;
        })

        // 点击左侧导航栏效果
        const listno = document.querySelectorAll('.listno')
        listno.forEach(item => {
            item.addEventListener('click', function (e) {
                // console.log(e.target);
                listno.forEach(item => {
                    item.classList.remove('activebj')
                })
                item.classList.add('activebj')
            })
        });

    </script>
</body>

</html>